<script>
//
import SqlQuery from "./workspace/SqlQuery.vue";
import UndulatingBlock from "./workspace/UndulatingBlock.vue";
import SolowellQuery from "./workspace/SolowellQuery.vue";
import WellhistoryQuery from "./workspace/WellhistoryQuery.vue";
import SideBar from "@/components/SideBar.vue";
import RelativePerm from "./workspace/RelativePerm.vue";
import TestComponent from "./workspace/TestComponent.vue";
import PipCheck from "./workspace/PipCheck.vue";

export default {
  components: {
    SideBar,
    SqlQuery,
    UndulatingBlock,
    SolowellQuery,
    WellhistoryQuery,
    RelativePerm,
    TestComponent,
    PipCheck,
  },
  data: function () {
    return {
      editableTabsValue: "0",
      editableTabs: [],
      tabIndex: 0,
      tabsvisible: "visibility:hidden",
    };
  },
  methods: {
    addTab(listen) {
      this.tabsvisible = "visibility:visible";
      this.listen = listen;
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: listen.title,
        name: newTabName,
        component: listen.component,
      });
      this.editableTabsValue = newTabName;
      console.log(this.editableTabsValue);
    },
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
      console.log(this.tabIndex);
      console.log(this.editableTabsValue);
      if (this.tabIndex === 0) {
        this.tabsvisible = "visibility:hidden";
      }
    },
  },
};
</script>
<template>
  <el-container class="WorkspaceView">
    <el-aside width="auto">
      <el-scrollbar>
        <side-bar v-on:newtab="addTab"></side-bar>
      </el-scrollbar>
    </el-aside>

    <el-main
      ><el-scrollbar>
        <el-tabs
          v-model="editableTabsValue"
          type="card"
          :style="tabsvisible"
          closable
          style="width: 100%"
          @tab-remove="removeTab"
        >
          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            height="100%"
          >
            <component :is="item.component" :fathername="item.name" />
          </el-tab-pane>
        </el-tabs>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>
<style></style>
<style scoped>
.el-tabs {
  border-radius: 5px;
  background-color: white;
  z-index: 1;
  height: 100%;
}

.el-tab-pane {
  padding: 10px;
  height: 100%;
  min-width: 400px;
}
.el-aside {
  user-select: none;
  height: 100%;
}
.backfill {
  position: relative;
  width: max-content;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;
  text-shadow: 2px 2px 3px white;
}

.el-main {
  display: block;
  background-color: lightgray;
  align-items: center;
  height: 100%;
  padding: 10px;
}
</style>
